import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/controllers/category_list_controller.dart';
import 'package:flutter_demo/entities/article_item.dart';
import 'package:flutter_demo/views/loading_container.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:get/get.dart';

import '../utils/const.dart';
import 'article_detail_page.dart';

class CategoryListPage extends GetView<CategoryListController> {
  final int index;

  const CategoryListPage(this.index, {Key? key}) : super(key: key);

  @override
  String? get tag => index.toString();

  @override
  Widget build(BuildContext context) {
    Get.put(CategoryListController(index), tag: tag);
    return Row(
      children: [
        SizedBox(
          width: 70,
          child: _CategoryTabs(index),
        ),
        Container(
          width: 0.5,
          height: Size.infinite.height,
          color: Get.theme.dividerColor,
        ),
        Expanded(child: _CategoryContent(index))
      ],
    );
  }
}

class _CategoryTabs extends GetView<CategoryListController> {
  final int index;

  @override
  String? get tag => index.toString();

  const _CategoryTabs(this.index, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
        itemBuilder: (context, index) => _buildItem(index),
        separatorBuilder: (_, index) => const Divider(height: 0.5),
        itemCount: controller.tabs.length);
  }

  Widget _buildItem(int index) {
    final tab = controller.tabs[index];
    return Obx(
      () => Container(
        color: controller.selectTab.value == index ? Colors.white : Colors.white70,
        child: InkWell(
          onTap: () => _handleItemClick(index),
          child: Row(
            children: [
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(6, 0, 3, 0),
                  child: Text(
                    tab.label,
                    style: const TextStyle(fontSize: 14),
                    maxLines: 2,
                  ),
                ),
              ),
              Container(
                width: 3,
                height: 44,
                color: controller.selectTab.value == index ? Colors.blue : Colors.transparent,
              ),
            ],
          ),
        ),
      ),
    );
  }

  _handleItemClick(int index) {
    controller.changeTab(index);
  }
}

class _CategoryContent extends GetView<CategoryListController> {
  final int index;

  @override
  String? get tag => index.toString();

  const _CategoryContent(this.index, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Obx(
        () => LoadingContainer(
          status: controller.listLoadingStatus.value,
          onReload: () => controller.getList(),
          child: EasyRefresh(
            onRefresh: () => controller.getList(),
            onLoad: () => controller.hasMore.value ? controller.getList(init: false) : null,
            child: ListView.separated(
                itemBuilder: (context, index) => _buildItem(index),
                separatorBuilder: (context, index) => const Divider(
                      thickness: 0.5,
                      height: 0.5,
                    ),
                itemCount: controller.list.length + 1),
          ),
        ),
      ),
    );
  }

  _buildItem(int pos) {
    if (pos == 0) {
      return _buildSortArticleView();
    }
    final index = pos - 1;
    final item = controller.list[index];
    return InkWell(
      onTap: () => _handleToDetail(item),
      child: Padding(
        padding: const EdgeInsets.all(8),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.only(right: 5),
              child: CachedNetworkImage(
                imageUrl: item.cover.toString(),
                httpHeaders: Const.imgHeaders,
                width: 90,
                height: 50,
              ),
            ),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    item.title,
                    style: const TextStyle(fontWeight: FontWeight.w500),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(6),
                    child: Row(
                      children: item.tags
                          .map(
                            (e) => Text(
                              e,
                              style: const TextStyle(fontSize: 12),
                              overflow: TextOverflow.clip,
                            ).paddingOnly(right: 10),
                          )
                          .toList(),
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  _buildSortArticleView() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        DropdownButtonHideUnderline(
          child: Obx(
            () => DropdownButton(
              items: const [
                DropdownMenuItem(child: Text("全部"), value: "all"),
                DropdownMenuItem(child: Text("免费"), value: "1"),
                DropdownMenuItem(child: Text("付费"), value: "2"),
                DropdownMenuItem(child: Text("vip免费"), value: "3"),
                DropdownMenuItem(child: Text("vip优惠"), value: "4")
              ],
              value: controller.selectType.value,
              onChanged: (value) {
                controller.setSelectType(value.toString());
              },
              isDense: true,
              style: const TextStyle(fontSize: 13, color: Colors.black45),
            ).paddingOnly(left: 10, right: 10, top: 5, bottom: 5),
          ),
        ),
        Container(
          width: 0.5,
          height: 18,
          color: Get.theme.dividerColor,
        ),
        DropdownButtonHideUnderline(
          child: Obx(
            () => DropdownButton(
              items: const [
                DropdownMenuItem(child: Text("发布日期"), value: "date"),
                DropdownMenuItem(child: Text("修改日期"), value: "modified"),
                DropdownMenuItem(child: Text("评论数量"), value: "comment_count"),
                DropdownMenuItem(child: Text("随机"), value: "rand"),
                DropdownMenuItem(child: Text("热度"), value: "hot")
              ],
              value: controller.selectSort.value,
              onChanged: (value) {
                controller.setSelectSort(value.toString());
              },
              isDense: true,
              style: const TextStyle(fontSize: 13, color: Colors.black45),
            ).paddingOnly(left: 10, right: 10, top: 5, bottom: 5),
          ),
        ),
      ],
    );
  }

  _handleToDetail(ArticleItem item) {
    Get.to(() => ArticleDetailPage(), arguments: item);
  }
}
